<template>
  <div class="user-card-panel">
    <div
      style="height: 250px"
      class="user-card-container pos-relative border-rounded-lg p-2"
    >
      <div class="pos-absolute top-0 right-0 plus-box">
        <router-link to="/user/profile" class="block w-full h-full" style="">
          <span class="pt-5.2 block pl-5.2 text-white text-3" style="color: #f6d6c2"
            >享只换不修</span
          >
        </router-link>
      </div>
      <div class="pos-relative">
        <div class="flex items-center">
          <div class="pr-2 pos-relative" @mouseleave="isEditAvatar = false">
            <router-link to="/user/profile">
              <el-avatar
                :size="50"
                @mouseover="isEditAvatar = true"
                :src="'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp'"
              ></el-avatar>
            </router-link>
            <transition name="el-fade-in-linear">
              <div
                class="cursor-pointer pos-absolute top-1 left-1 bg-gray-700 border-rounded-lg"
                style="width: 18px; height: 18px"
                v-if="isEditAvatar"
                @click="handleEditAvatar"
              >
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑资料"
                  placement="right"
                >
                  <span>
                    <el-icon color="#fff"><EditPen /> </el-icon>
                  </span>
                </el-tooltip>
              </div>
            </transition>
          </div>
          <div class="">
            <router-link to="/user">
              <h6
                class="text-3.8 font-700 flex items-center hover:cursor-pointer hover:text-red"
              >
                {{ "暂无昵称" }}
                <el-icon><ArrowRight /></el-icon>
              </h6>
            </router-link>
            <div class="flex py-1">
              <span
                class="text-sm text-secondary text-gray-500 mr-2 hover:cursor-pointer hover:text-red-500"
                @click="handleLogout"
                >切换账号</span
              >
              <span
                class="text-sm text-secondary text-gray-500 hover:cursor-pointer hover:text-red-500"
                @click="handleLogout"
                >退出</span
              >
            </div>
          </div>
        </div>
        <div class="flex items-center justify-between p-2 border-b">
          <div class="item" ref="toBoxRef">
            <router-link to="" class="flex items-center justify-center flex-col">
              <b>25</b>
              <span class="text-3 text-gray-600">优惠券</span>
            </router-link>
          </div>
          <div class="item">
            <router-link to="" class="flex items-center justify-center flex-col">
              <b>25</b>
              <span class="text-3 text-gray-600">优惠券</span>
            </router-link>
          </div>
          <div class="item">
            <router-link to="" class="flex items-center justify-center flex-col">
              <b>抽¥50</b>
              <span class="text-3 text-gray-600">红包</span>
            </router-link>
          </div>
          <div class="item">
            <router-link to="" class="flex items-center justify-center flex-col">
              <b>25</b>
              <span class="text-3 text-gray-600">优惠券</span>
            </router-link>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-between p-2">
        <div class="item">
          <router-link to="" class="flex items-center justify-center flex-col">
            <el-icon :size="23"><Wallet /></el-icon>
            <span class="text-3 text-gray-600">待付款</span>
          </router-link>
        </div>
        <div class="item">
          <router-link to="" class="flex items-center justify-center flex-col">
            <el-icon :size="23"><Wallet /></el-icon>
            <span class="text-3 text-gray-600">待付款</span>
          </router-link>
        </div>
        <div class="item">
          <router-link to="" class="flex items-center justify-center flex-col">
            <el-icon :size="23"><Wallet /></el-icon>
            <span class="text-3 text-gray-600">待付款</span>
          </router-link>
        </div>
        <div class="item">
          <router-link to="" class="flex items-center justify-center flex-col">
            <el-icon :size="23"><Wallet /></el-icon>
            <span class="text-3 text-gray-600">待付款</span>
          </router-link>
        </div>
      </div>
      <div class="bg-white border-rounded-lg mt-3">
        <el-carousel height="65px" :interval="5000" arrow="never" motion-blur>
          <el-carousel-item v-for="item in 4" :key="item">
            <div class="flex items-center px-2" style="height: 65px">
              <div class="border-rounded-lg overflow-hidden">
                <img src="@/assets/images/product/d2c5d0177ae11ed2.png" alt="" />
              </div>
              <div class="p-2">
                <h5 class="text-3.5">已完成</h5>
                <p class="text-gray-500 text-3">您的订单已送达至【大王...</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="h-3"></div>
    <div class="border-rounded-lg py-2" style="background-color: #f7f8fc">
      <el-carousel
        :interval="18000"
        arrow="always"
        :loop="false"
        :autoplay="false"
        height="110px"
      >
        <!-- 遍历分组后的二维数组 -->
        <el-carousel-item v-for="(group, index) in quickCardList" :key="index">
          <!-- 在每一个轮播项中，遍历组内的每一个元素 -->
          <div class="item-container">
            <div v-for="item in group" :key="item.id" class="single-item w-1/4 pt-1">
              <router-link to="/" class="hover:text-gray-500">
                <el-image :src="item.icon" :alt="item.name" class="item-img" />
                <p class="item-text text-3 mt-1">{{ item.title }}</p>
              </router-link>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <teleport to="#target-container">
      <transition name="fade">
        <div
          class="pos-fixed w-full h-full bg-black bg-opacity-50 left-0 top-0 z-210"
          v-if="showPromotionsMask"
        >
          <CurrentPromotions
            :coordinates="toBoxCoordinates"
            @close="closePromotionsMask"
          />
        </div>
      </transition>
    </teleport>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { Wallet, EditPen, ArrowRight } from "@element-plus/icons-vue";
import CurrentPromotions from "./CurrentPromotions.vue";

// 1. 使用 import.meta.glob 批量获取图片模块
// 注意：pattern 需为字面量，不能使用变量[8](@ref)
const imageModules = import.meta.glob("@/assets/icons/*.{png,jpg,jpeg,webp}", {
  eager: true,
});

// 2. 处理模块，提取 URL
const imageList = ref<any[]>([]);

// 遍历模块对象，提取默认导出（即 URL）
Object.values(imageModules).forEach((module: any) => {
  imageList.value.push(module.default); // 假设 eager: true 时，module 包含 default 属性
});
console.log(imageList.value);
// -- 快捷卡片
const originalData = ref([
  {
    title: "订单管理",
    icon: imageList.value[0],
    path: "/order",
  },
  {
    title: "商品管理",
    icon: imageList.value[1],
    path: "/product",
  },
  {
    title: "用户管理",
    icon: imageList.value[2],
    path: "/user",
  },
  {
    title: "角色管理",
    icon: imageList.value[3],
    path: "/role",
  },
  {
    title: "订单管理",
    icon: imageList.value[4],
    path: "/order",
  },
  {
    title: "商品管理",
    icon: imageList.value[5],
    path: "/product",
  },
  {
    title: "用户管理",
    icon: imageList.value[6],
    path: "/user",
  },
  {
    title: "角色管理",
    icon: imageList.value[7],
    path: "/role",
  },
  {
    title: "订单管理",
    icon: imageList.value[8],
    path: "/order",
  },
  {
    title: "商品管理",
    icon: imageList.value[2],
    path: "/product",
  },
  {
    title: "用户管理",
    icon: imageList.value[3],
    path: "/user",
  },
  {
    title: "角色管理",
    icon: imageList.value[5],
    path: "/role",
  },
]);

// 2. 定义分组函数
const chunkArray = (array: any[], size: number) => {
  const result = [];
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size));
  }
  return result;
};

// 3. 使用计算属性对原始数据进行实时分组
// 当 originalData 变化时，groupedData 会自动更新
const quickCardList = computed(() => {
  return chunkArray(originalData.value, 8); // 此处 4 代表每组4个元素
});
const isEditAvatar = ref(false);
const handleLogout = () => {};

const handleEditAvatar = () => {};

// gasp动画模块
const showPromotionsMask = ref(true);
const toBoxRef = ref<HTMLDivElement | null>(null);
const toBoxCoordinates = ref({ x: 0, y: 0 });

const closePromotionsMask = () => {
  console.log("关闭弹窗");
  
  showPromotionsMask.value = false;
};
onMounted(() => {
  if (toBoxRef.value) {
    const rect = toBoxRef.value.getBoundingClientRect();
    toBoxCoordinates.value = {
      x: rect.left,
      y: rect.top,
    };
  }
});
</script>

<style lang="scss" scoped>
// 用户信息面板
.user-card-container {
  height: 260px;
  background: linear-gradient(112deg, #fff7fb, #fff7f7 59.99%, #fff9fa),
    linear-gradient(0deg, white, white);
  .plus-box {
    position: absolute;
    right: 0;
    top: 0;
    width: 105px;
    height: 52px;
    background: url(https://img13.360buyimg.com/imagetools/jfs/t1/277696/12/9009/16515/67e0fa0bF46d37cac/645984b608a9867e.png)
      100% 100%;
    background-size: 100% 100%;
    z-index: 2;
  }
}

/* 修改所有指示器按钮的形状为圆点 */
:deep(.el-carousel__button) {
  width: 15px; /* 设置宽度 */
  height: 3px; /* 设置高度 */
  border-radius: 3px; /* 设置为圆形 */
  background-color: rgba(0, 0, 0, 0.2); /* 设置默认背景色（非激活状态） */
  border: none; /* 移除默认边框 */
}

/* 修改激活状态指示器的样式 */
:deep(.is-active .el-carousel__button) {
  background-color: #f7c173; /* 设置激活状态背景色（示例为橙色） */
  /* 你也可以在这里调整激活状态圆点的大小 */
  /* width: 15px; */
  /* height: 15px; */
}

/* 调整指示器容器的位置 (例如靠右显示) */
:deep(.el-carousel__indicators--horizontal) {
  left: unset; /* 重置默认的left定位 */
  right: 10%; /* 设置距离右侧2% */
  bottom: -10px; /* 设置距离底部20px */
}

// 快捷卡片容器
.item-container {
  display: flex; /* 使用Flex布局让子元素横向排列 */
  justify-content: flex-start; /* 或 space-between, 均匀分布 */
  align-items: start; /* 垂直居中 */
  height: 100%; /* 继承Carousel的高度 */
  flex-wrap: wrap;
}

.single-item {
  /* 每个项目约占容器宽度的22%，留一些间隙 */
  text-align: center;
}

.item-img {
  width: 28px; /* 控制图片大小 */
  height: 28px;
  object-fit: cover; /* 保持图片比例 */
  border-radius: 8px; /* 可选：圆角 */
}

:deep(.el-carousel__arrow--left) {
  left: -16px;
  i {
    transform: translate(5px, 0px);
  }
}
:deep(.el-carousel__arrow--right) {
  right: -16px;
  i {
    transform: translate(-5px, 0px);
  }
}
</style>
